<template>
  <div class="app-container bg-gray">
    <el-card class="box-1">
      <div class="header">
        <div>
          <el-tag type="info" effect="light"><b>{{ date.start }} - {{ date.end }}</b></el-tag>
          <el-select v-model="searchTerms['sales_uin']" clearable filterable class="select" placeholder="全部业务员"
                     @change="getData">
            <el-option v-for="(item, index) in salerList" :key="index" :label="`业务员：${item.sales_name}`"
                       :value="item.sales_uin"/>
          </el-select>
        </div>
      </div>
      <el-row :gutter="20" class="model">
        <el-col :xs="12" :sm="7" :md="6" :lg="5" :xl="4">
          <el-card shadow="hover">
            <span>总消费额</span>
            <div><span>￥ </span> {{ money }}</div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="7" :md="6" :lg="5" :xl="4">
          <el-card shadow="hover">
            <span>总业绩（不包含短信和域名）</span>
            <div><span>￥ </span> {{ achieve }}</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="table-chart">
        <div class="column flex-left">
          <div class="item bg-green">
            <!--<div class="label1"><b>消费额统计</b></div>-->
            <div class="label1">
              <el-select v-model="searchTerms.buyType" placeholder="全部类型" size="small" @change="getData">
                <el-option value="all" label="全部类型"/>
                <el-option value="purchase" label="新购"/>
                <el-option value="renew" label="续费"/>
                <el-option value="modify" label="配置变更"/>
              </el-select>
            </div>
          </div>
          <div class="item flex-row">
            <div class="label2">新拓</div>
            <div>
              <div class="label2 text-7a">总计</div>
              <div class="label2 text-7a">自付</div>
              <div class="label2 text-7a">代付</div>
            </div>
          </div>
          <div class="item flex-row">
            <div class="label2">存量</div>
            <div>
              <div class="label2 text-7a">总计</div>
              <div class="label2 text-7a">自付</div>
              <div class="label2 text-7a">代付</div>
            </div>
          </div>
          <div class="item flex-row">
            <div class="label2">指派</div>
            <div>
              <div class="label2 text-7a">总计</div>
              <div class="label2 text-7a">自付</div>
              <div class="label2 text-7a">代付</div>
            </div>
          </div>
          <div class="item flex-row bg-green2">
            <div class="label1">总计（￥）</div>
          </div>
        </div>
        <div v-for="(item, index) in tableData" :key="index" class="column">
          <div class="item bg-green">
            <el-tooltip :content="item.name" effect="dark" placement="top">
              <div class="label1">{{ item.name }}</div>
            </el-tooltip>
          </div>
          <div class="item">
            <div class="label2 text-7a">{{ item['new_money'] }}</div>
            <div class="label2 text-7a">{{ item['new_selfpay_money'] }}</div>
            <div class="label2 text-7a">{{ item['new_otherpay_money'] }}</div>
          </div>
          <div class="item">
            <div class="label2 text-7a">{{ item['old_money'] }}</div>
            <div class="label2 text-7a">{{ item['old_selfpay_money'] }}</div>
            <div class="label2 text-7a">{{ item['old_otherpay_money'] }}</div>
          </div>
          <div class="item">
            <div class="label2 text-7a">{{ item['assign_money'] }}</div>
            <div class="label2 text-7a">{{ item['assign_selfpay_money'] }}</div>
            <div class="label2 text-7a">{{ item['assign_otherpay_money'] }}</div>
          </div>
          <div class="item">
            <div class="label1 bg-green2">{{ item['total_money'].toFixed(2) }}</div>
          </div>
        </div>
        <div class="column flex-right">
          <div class="item bg-green2">
            <div class="label1">总计（￥）</div>
          </div>
          <div class="item bg-green2">
            <div class="label2">{{ totalData['new_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['new_selfpay_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['new_otherpay_money'].toFixed(2) }}</div>
          </div>
          <div class="item bg-green2">
            <div class="label2">{{ totalData['old_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['old_selfpay_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['old_otherpay_money'].toFixed(2) }}</div>
          </div>
          <div class="item bg-green2">
            <div class="label2">{{ totalData['assign_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['assign_selfpay_money'].toFixed(2) }}</div>
            <div class="label2">{{ totalData['assign_otherpay_money'].toFixed(2) }}</div>
          </div>
          <div class="item">
            <div class="label1 bg-green3">{{ totalData['total_money'].toFixed(2) }}</div>
          </div>
        </div>
      </div>

      <div class="rank-box">
        <b>TOP5消费情况</b>
        <el-row gutter="20">
          <el-col :span="8">
            <ul class="ranklist">
              <div>按业务员统计</div>
              <li v-for="(item, index) in salerRankList" :key="index">
                <el-tooltip :content="item.name" effect="dark" placement="top">
                  <span class="name">{{ item.name }}</span>
                </el-tooltip>
                <el-progress :percentage="item.rate" :show-text="false" :stroke-width="6" color="#1EC2A0"/>
                <div>
                  <span>￥ </span> {{ item.money }}
                </div>
              </li>
            </ul>
          </el-col>

          <el-col :span="8">
            <ul class="ranklist">
              <div>按客户账号统计</div>
              <li v-for="(item, index) in customerRankList" :key="index"
                  @click="!ranklistType?memberClick(item.id, item.name):''">
                <el-tooltip :content="item.name" effect="dark" placement="top">
                  <span class="name">{{ item.name }}</span>
                </el-tooltip>
                <el-progress :percentage="item.rate" :show-text="false" :stroke-width="6" color="#1EC2A0"/>
                <div>
                  <span>￥ </span> {{ item.money }}
                </div>
              </li>
            </ul>
          </el-col>

          <el-col :span="8">
            <ul class="ranklist">
              <div>按产品统计</div>
              <li v-for="(item, index) in productRankList" :key="index"
                  @click="!ranklistType?memberClick(item.id, item.name):''">
                <el-tooltip :content="item.name" effect="dark" placement="top">
                  <span class="name">{{ item.name }}</span>
                </el-tooltip>
                <el-progress :percentage="item.rate" :show-text="false" :stroke-width="6" color="#1EC2A0"/>
                <div>
                  <span>￥ </span> {{ item.money }}
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        searchTerms: {
          buyType: 'all',
          sales_uin: ''
        },
        // 业务员列表
        salerList: [],
        tableData: [],
        totalData: {},
        salerRankList: [],
        customerRankList: [],
        productRankList: [],
        date: {},
        // 总业绩
        achieve: '',
        // 总业绩
        money: ''
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.getData();
    },
    methods: {
      getData() {
        const url = 'tencent/getAnalysisStatistics';
        const data = {
          id: this.id,
          type: this.searchTerms.buyType,
          sales_uin: this.searchTerms.sales_uin
        }
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.salerList = res.data.sales_list;
          this.tableData = res.data.list;
          this.achieve = res.data.achieve;
          this.money = res.data.money;
          this.salerRankList = res.data.statistics['sales_money'];
          this.customerRankList = res.data.statistics['owner_uin_money'];
          this.productRankList = res.data.statistics['product_money'];
          this.date = res.data.date;

          const temp = res.data.list;
          const totalData = {
            new_money: 0,
            new_selfpay_money: 0,
            new_otherpay_money: 0,
            old_money: 0,
            old_selfpay_money: 0,
            old_otherpay_money: 0,
            assign_money: 0,
            assign_selfpay_money: 0,
            assign_otherpay_money: 0,
            total_money: 0
          };
          for (let i = 0; i < temp.length; i++) {
            totalData.new_money += temp[i].new_money;
            totalData.new_selfpay_money += temp[i].new_selfpay_money;
            totalData.new_otherpay_money += temp[i].new_otherpay_money;
            totalData.old_money += temp[i].old_money;
            totalData.old_selfpay_money += temp[i].old_selfpay_money;
            totalData.old_otherpay_money += temp[i].old_otherpay_money;
            totalData.assign_money += temp[i].assign_money;
            totalData.assign_selfpay_money += temp[i].assign_selfpay_money;
            totalData.assign_otherpay_money += temp[i].assign_otherpay_money;
            totalData.total_money += temp[i].total_money;
          }
          this.totalData = totalData;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .model {
    .el-card {
      color: #fff;
      background-color: $panGreen;

      span {
        font-size: 14px;
      }

      div {
        font-size: 24px;
        margin-top: 10px;
      }
    }
  }

  .box-1 {
    .header {
      @include flex-row(center, space-between);
      padding-bottom: 15px;
      flex-wrap: wrap;

      .el-select {
        margin-left: 10px;
        width: 160px;
      }
    }

    .table-chart {
      display: flex;
      align-items: center;
      margin-top: 20px;
      overflow: auto;
      position: relative;

      .bg-green {
        background-color: rgba(30, 194, 160, 0.2);
      }

      .bg-green2 {
        background-color: rgba(30, 194, 160, 0.5);
      }

      .bg-green3 {
        background-color: rgba(30, 194, 160, 0.8);
      }

      .column {
        background-color: white;
        &:last-child {
          .item {
            border-right: none;
          }
        }

        .item {
          border-right: 1px solid #e7e7e7;
          border-bottom: 1px solid #e7e7e7;

          &:last-child {
            border-bottom: none;
          }

          .label1 {
            width: 120px;
            text-align: center;
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 10px;
            margin: 0 auto;
          }

          .label2 {
            height: 36px;
            line-height: 36px;
            width: 90px;
            text-align: center;
            margin: 0 auto;
          }
          .text-7a{
            color: #7a7a7a;
          }
        }
      }

      .column.flex-left{
        position: sticky;
        left: 0;
        /*-moz-box-shadow:2px 1px 12px rgba(0, 115, 111, 0.5);*/
        /*-webkit-box-shadow:2px 1px 12px rgba(0, 115, 111, 0.5);*/
        /*box-shadow:2px 1px 12px rgba(0, 115, 111, 0.5);*/
      }
      .column.flex-right{
        position: sticky;
        right: 0;
        /*-moz-box-shadow:-2px 1px 12px rgba(0, 115, 111, 0.5);
        -webkit-box-shadow:-2px 1px 12px rgba(0, 115, 111, 0.5);
        box-shadow:-2px 1px 12px rgba(0, 115, 111, 0.5);*/
      }

      .list {
        max-width: 1000px;
        overflow: auto;
      }
    }

    .rank-box {
      margin-top: 50px;

      ul, li {
        padding: 0;
        margin: 0;
      }

      ul {
        border: 1px solid #b7b7b7;
        border-radius: 3px;
        padding: 20px;
        margin: 20px 0 0 0;
      }

      .ranklist {
        list-style: none;

        > div {
          padding-bottom: 20px;
        }

        > li {
          @include flex-row(center, flex-start);

          .name {
            width: 120px;
            overflow: hidden;
            font-size: 16px;
            font-weight: normal;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }

          .el-progress {
            width: 50%;
            padding: 0 20px;
          }

          > div {
            font-size: 18px;
            color: $textGray;
            line-height: 40px;

            > span {
              font-size: 14px;
            }
          }
        }
      }
    }

  }
</style>
